import 'package:flutter/material.dart';

main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "list demo",
      home: MyHomePage(
        title: "首页",
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // print('_MyHomePageState build');
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: RefreshIndicator(
            onRefresh: () => Future.delayed(const Duration(seconds: 3)),
            // 创建滚动视窗，可以添加多个滚动组件
            child: CustomScrollView(
              slivers: [
                // 固定title，让title有吸顶效果
                SliverPersistentHeader(
                  delegate: MyDelegate('title1'),
                  pinned: true, // 是否吸顶
                ),
                SliverGrid.builder(
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 4),
                  itemCount: 50,
                  itemBuilder: (context, index) {
                    return Container(
                      color: Colors.primaries[index % 18],
                    );
                  },
                ),
                SliverPersistentHeader(
                  delegate: MyDelegate('title2'),
                  pinned: true, // 是否吸顶
                ),
                SliverList.builder(
                  itemCount: 50,
                  itemBuilder: (context, index) {
                    return Container(
                      color: Colors.primaries[index % 18],
                      child: Text('item$index'),
                    );
                  },
                ),
                SliverPersistentHeader(
                  delegate: MyDelegate('title3'),
                  pinned: true, // 是否吸顶
                ),
                SliverFixedExtentList.builder(
                    itemBuilder: (context, index) {
                      return Container(
                        color: Colors.primaries[index % 18],
                      );
                    },
                    itemExtent: 50)
              ],
            )));
  }
}

class MyDelegate extends SliverPersistentHeaderDelegate {
  MyDelegate(this.title);
  String title;
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      height: 50,
      color: Colors.purpleAccent,
      alignment: Alignment.center,
      child: Text(title),
    );
  }

  @override
  double get maxExtent => 50;

  @override
  double get minExtent => 50;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}
